<template>
  <div class="page-container">
    <card title="订单信息">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="长租订单号">{{ orderDetails?.orderInfo.orderNo }}</a-descriptions-item>
            <a-descriptions-item label="订单获取方式">{{ orderDetails?.orderInfo.orderAcquisitionTypeName }}</a-descriptions-item>
            <a-descriptions-item label="订单来源">{{ orderDetails?.orderInfo.orderSourceName }}</a-descriptions-item>
            <a-descriptions-item
              label="预计租赁周期"
              v-if="orderDetails?.orderInfo.expectedUseCarTime && orderDetails?.orderInfo.expectedReturnCarTime"
            >
              {{ orderDetails?.orderInfo.expectedUseCarTime }}至{{ orderDetails?.orderInfo.expectedReturnCarTime }}
            </a-descriptions-item>
            <a-descriptions-item label="租期">{{ orderDetails?.orderInfo.leaseNumberStr }}</a-descriptions-item>
            <a-descriptions-item label="账单门店">{{ orderDetails?.orderInfo.siteName }}</a-descriptions-item>
            <a-descriptions-item label="车型">{{ orderDetails?.orderInfo.modelName }}</a-descriptions-item>
            <a-descriptions-item label="订单状态">{{ orderDetails?.orderInfo.statusName }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card title="合同信息" v-if="orderDetails?.orderInfo.contractList && orderDetails?.orderInfo.contractList.length > 0">
      <div class="section-item">
        <div class="section-item-content">
          <template v-for="(item, index) in orderDetails.orderInfo.contractList" :key="index">
            <a-descriptions :size="'medium'" :align="{ label: 'right' }">
              <a-descriptions-item :label="item.contractTypeName">
                <file-preview v-if="item.contractFileId" :contractName="item.contractName" :id="item.contractFileId" />
                <template v-else>{{ '-' }}</template>
              </a-descriptions-item>
              <a-descriptions-item label="合同编号">{{ item.contractNo || '-' }}</a-descriptions-item>
            </a-descriptions>
          </template>
        </div>
      </div>
    </card>
    <card title="费用信息">
      <div class="section-item">
        <div class="section-item-content">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="费用金额">{{ unitVal(orderDetails?.allPay, '元') }} </a-descriptions-item>
            <a-descriptions-item label="实收金额">{{ unitVal(orderDetails?.payAmount, '元') }} </a-descriptions-item>
            <a-descriptions-item label="待收金额">{{ unitVal(orderDetails?.receiveAmount, '元') }} </a-descriptions-item>
            <a-descriptions-item label="实付金额">{{ unitVal(orderDetails?.feeAmount, '元') }} </a-descriptions-item>
            <a-descriptions-item label="待付金额">{{ unitVal(orderDetails?.receiveFeeAmount, '元') }} </a-descriptions-item>
            <template v-if="orderDetails?.totalDetailList && orderDetails?.totalDetailList.length > 0">
              <template v-for="(item, index) in orderDetails.totalDetailList" :key="index">
                <a-descriptions-item :label="`${item.name}-账单计划总额`">{{ unitVal(item.amount, '元') }} </a-descriptions-item>
                <a-descriptions-item :label="`${item.name}-账单计划待收金额`"
                  >{{ unitVal(item.receivedNotAmount, '元') }}
                </a-descriptions-item>
              </template>
            </template>
          </a-descriptions>
        </div>
      </div>
    </card>
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="getOrderDetails" />

    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="getOrderDetails">
      <template #expand-icon="{ expanded }">
        <icon-plus-circle class="icon-custom" v-if="!expanded" />
        <icon-minus-circle class="icon-custom" v-else />
      </template>
      <template #selectkey>
        <div></div>
      </template>
      <template #feeRecordList="{ record }">
        <div v-for="item in record.feeRecordList" :key="item.recordCode">
          {{ item.recordCode }}
        </div>
      </template>
      <template #turnoverInfo="{ record }">
        <div v-if="record.recordStatusName == '未确认'"> - </div>
        <div v-else>
          <div>{{ record.recordConfirmTime }}</div>
          <div>{{ record.recordConfirmUserName }}</div>
        </div>
      </template>
    </table-index>
  </div>
</template>
<script setup lang="ts" name="LongOrderBillDetail">
  import { unitVal } from '@/utils'
  import { getBillDetail } from '@/api/finance/czOrderBill'
  import { ref, onMounted, reactive, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { useTable } from '@/hooks/table'
  import filePreview from '@/views/order/long-order/components/upload-file/file-preview.vue'
  import { useSysDict, usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('costConfirmDict')
  const route = useRoute()
  const orderDetails = ref<any>()
  const pageId = ref()
  const queryParam = reactive({})
  // 查询条件
  const searchList = computed(() => {
    return [
      // { label: '费用类型', prop: 'feeType', type: 'a-select', options: dict.orderFeeTypeEnum },
      { label: '收支类型', prop: 'costType', type: 'a-select', options: dict.costTypeEnum },
      { label: '费用状态', prop: 'feeStatus', type: 'a-select', options: dict.orderFeeStatusEnum },
    ]
  })
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: ' ', slotName: 'selectkey', width: 55, fixed: 'left' },
      { title: '费用名称', dataIndex: 'feeName', fixed: 'left', width: 180, ellipsis: true },
      { title: '费用类型', dataIndex: 'feeTypeName', ellipsis: true },
      { title: '收支类型', dataIndex: 'costTypeName', ellipsis: true },
      { title: '费用金额', dataIndex: 'totalAmount', unit: '元' },
      { title: '实结金额', dataIndex: 'payAmount', unit: '元' },
      { title: '待结金额', dataIndex: 'receiveAmount', unit: '元' },
      { title: '生成节点', dataIndex: 'createNodeName', ellipsis: true },
      { title: '生成时间', dataIndex: 'createTime', width: 180, ellipsis: true },
      { title: '应结时间', dataIndex: 'receivableTime', width: 180, ellipsis: true },
      { title: '收支方式', dataIndex: 'payTypeName', ellipsis: true },
      { title: '费用状态', dataIndex: 'feeStatusName', ellipsis: true },
      { title: '收付款时间', dataIndex: 'payTime', width: 180 },
      { title: '确认时间', dataIndex: 'confirmTime', width: 180 },
      { title: '确认人', dataIndex: 'confirmUserName' },
      { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true },
      { title: '确认对账信息', dataIndex: 'information', width: 230, ellipsis: true },
      { title: '流水号', dataIndex: 'feeRecordList', slotName: 'feeRecordList', width: 200 },
      { title: '流水状态', dataIndex: 'recordStatusName', ellipsis: true },
      { title: '流水确认信息', slotName: 'turnoverInfo', width: 230, fixed: 'right', ellipsis: true },
    ],
  })

  const tabletolist = (list: any) => {
    list.forEach((el: any) => {
      el.mtype = 'MENU'
      el.level = 1
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children.forEach((pl: any) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM'
          pl.expand = null
          if (pl.type == 0) {
            pl.feeName = pl.feeCategoryName
            pl.totalAmount = pl.amount
          }
          if (pl.type == 1) {
            pl.feeName = pl.itemName
            pl.totalAmount = pl.amount
          }
          if (pl.childrenList && pl.childrenList.length) {
            pl.children = pl.childrenList
            pl.children.forEach((ol: any) => {
              ol.id = ol.id + 60000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
              ol.mtype = 'TERM'
              ol.expand = null
              ol.feeName = ol.itemName
              ol.costTypeName = ol.costTypeName
              ol.totalAmount = ol.amount
              // ol.children = null
            })
          } else {
            return false
          }
        })
      } else {
        return false
      }
    })
    return list
  }
  const violationtilist = (list) => {
    list.forEach((el) => {
      el.mtype = 'MENU'
      el.level = 1
      el.totalAmount = el.totalAmount
      el.receiveAmount = el.waitPayAmount //待结金额
      el.receivableTime = el.dueDate
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children.forEach((pl) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM1'
          pl.expand = null
          pl.feeName = pl.itemName
          pl.totalAmount = pl.amount
        })
      } else {
        return false
      }
    })
    return list
  }

  // 获取订单详情
  const getOrderDetails = async () => {
    tableCompulsory.tableLoading = true
    const { result } = await getBillDetail({ id: pageId.value })

    const dataOne = []
    if (result.feeVoList && result.feeVoList.length) {
      result.feeVoList.forEach((i) => {
        if (
          (queryParam.feeType == undefined || queryParam.feeType === i.feeType) &&
          (queryParam.costType == undefined || queryParam.costType === i.costType) &&
          (queryParam.feeStatus == undefined || queryParam.feeStatus === i.feeStatus)
        ) {
          dataOne.push(i)
        }
      })
    }
    const feeVoList = dataOne

    var dataTwo = []
    if (result.violationFeeList && result.violationFeeList.length) {
      result.violationFeeList.forEach((i) => {
        if (
          (queryParam.feeType == undefined || queryParam.feeType === i.feeType) &&
          (queryParam.costType == undefined || queryParam.costType === i.costType) &&
          (queryParam.feeStatus == undefined || queryParam.feeStatus === i.feeStatus)
        ) {
          dataTwo.push(i)
        }
      })
    }
    const violationFeeList = dataTwo

    const data1 = tabletolist(feeVoList)
    let data2 = []
    // 违章数据处理push
    if (violationFeeList && violationFeeList.length > 0) {
      data2 = violationtilist(violationFeeList)
    }
    const data = [...data1, ...data2]
    data.forEach((item: any) => {
      item.information = item.confirmUserName && item.confirmTime ? `${item.confirmUserName} ${item.confirmTime}` : ''
    })

    orderDetails.value = result

    tableCompulsory.dataList = data
    tableCompulsory.tableLoading = false
  }

  onMounted(() => {
    pageId.value = route.params.id
    if (pageId.value) {
      getOrderDetails()
    }
  })
</script>
<style scoped lang="less">
  :deep(.arco-table .arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  .icon-custom {
    color: #0256ff;
    font-size: 20px;
  }

  .table-info {
    display: flex;
    align-items: center;
    .table-info-item {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .a-link {
        color: #1890ff;
      }
    }
  }
</style>
